<template>
	<view class="invoice-address-container">
		<u-cell-group :border="false">
           <u-field required label="收票人" v-model="addressForm.member_name" placeholder="请输入收票人姓名" :maxlength="20" />
           <u-field required label="手机号码" v-model="addressForm.member_mobile" placeholder="请输入手机号码" :maxlength="11" />
           <u-field required label="所在地区" v-model="addressForm.address" placeholder="请输入所在地区" disabled right-icon="arrow-right" @click.native="showAddressSelector = true" />
           <u-field required label="详细地址" v-model="addressForm.detail_addr" placeholder="请输入详细地址" :maxlength="20" />
        </u-cell-group>
        <view class="big-btn" @click="handleSaveAddress">
            <view class="btn">
                <text class="u-m-l-10">保存</text>
            </view>
        </view>
        <u-popup v-model="showAddressSelector" mode="bottom" closeable close-icon-size="20" border-radius="20">
            <region-picke @addressSelectorChanged="handleAddressSelectorChanged" @closeRegionpicke="showAddressSelector = false" :show="showAddressSelector"></region-picke>
        </u-popup>
	</view>
</template>

<script>
    import * as API_Members from '@/api/members'
    import { RegExp } from '@/ui-utils'
	export default {
		data() {
			return {
                /** 收票地址 表单 */
                addressForm: {
                    member_name: '',
                    member_mobile: '',
                    region: '',
                    address: '',
                    detail_addr: ''
                },
                /** 是否显示地址选择器 */
                showAddressSelector: false,
                regions: ''
			};
		},
        mounted() {
            this.GET_InvoiceAddress()
        },
        methods: {
            /** 地址选择器发生改变 */
            handleAddressSelectorChanged(object) {
                const obj = {
                    last_id: object[object.length - 1].id,
                    address: object.map(key => { return key.local_name }).join(' ')
                }
                this.addressForm.region = obj.last_id
                this.addressForm.address = obj.address
            },
            /** 增加/修改收票人地址 */
            handleSaveAddress() {
                // 数据处理
                let params = JSON.parse(JSON.stringify(this.addressForm))
                if (!params.member_name.trim()) {
                    this.$u.toast(`请输入收票人姓名`)
                } else if(!params.member_mobile){
                    this.$u.toast(`请输入收票人手机号码`)
                } else if (!RegExp.mobile.test(params.member_mobile)) {
                    this.$u.toast(`请输入正确的手机号码`)
                } else if (!params.region) {
                    this.$u.toast(`请选择所在地区`)
                } else if (!params.detail_addr.trim()) {
                    this.$u.toast(`请输入详细地址`)
                } else {
                    Promise.all([
                        params.id ? API_Members.changeTicketAdress(params, params.id) : API_Members.ticketAdressApply(params)
                    ]).then(async _ => {
                        await this.GET_InvoiceAddress()
                        await setTimeout(() => {
                            this.$u.toast('保存成功')
                        }, 500)
                    })
                }
            },
            /** 查询收票人地址 */
            GET_InvoiceAddress() {
                API_Members.queryTicketAdress().then(res => {
                    if(res) {
                        this.addressForm.id = res.id
                        this.addressForm.member_name = res.member_name
                        this.addressForm.member_mobile = res.member_mobile
                        this.addressForm.detail_addr = res.detail_addr
                        this.addressForm.address = `${res.province} ${res.city} ${res.county} ${res.town}`
                        this.addressForm.region = res.town_id && res.town_id != 0 ? res.town_id : res.county_id
                    }
                }
            )}
        }
	}
</script>

<style lang="scss" scoped>
/deep/ {
    .u-error-message {
        padding-left: 165rpx !important;
    }
}
</style>
